<template>
  <div class="go-out-tabs">
    <div class="left">
      <span class="name rows name_rows" v-if="tabList.length === 0">
        全部数据
      </span>
      <div class="rows" v-for="item in tabList" :key="item.id">
        <span class="name">{{ item.name }}</span>
        <img
          src="@/assets/workbench/goout/close.png"
          width="9px"
          height="7px"
          alt=""
          class="img"
          @click="filterClose(item)"
        />
      </div>
    </div>
    <div class="right">
      <VantButton
        type="primary"
        size="normal"
        color="rgba(29, 111, 233, 0.15)"
        round
        class="VantButton"
        @click="filterShow"
      >
        <template>
          <div class="flex items-center justify-center">
            <VanImage
              :src="require('@/assets/icon/icon_filter.png')"
              class="VanImage"
            ></VanImage>
            <span class="mx-4px">筛选</span>
          </div>
        </template>
      </VantButton>
    </div>
  </div>
</template>

<script>
import bus from "@/config/evenrBus";
import { Button as VantButton, Image as VanImage } from "vant";
import { throttle } from "lodash";

export default {
  props: {
    eventBus: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    VantButton,
    VanImage,
  },
  data() {
    return {
      tabList: [],
    };
  },
  mounted() {
    if (this.eventBus) {
      bus.$on("goOut_selectDataFilterList", (res) => {
        // 全选删除
        res.followTypeList.map((itme) => {
          if (itme.type == "0") {
            delete res.followTypeList;
          }
        });
        let list = [];
        for (let key in res) {
          res[key].map((item) => {
            list.push(item);
          });
        }
        this.tabList = list;
      });
    }
  },
  methods: {
    // 删除
    filterClose: throttle(function (row) {
      this.tabList.forEach((item, index) => {
        if (item.key === row.key) {
          this.tabList.splice(index, 1);
        }
      });
      this.$emit("closeTabs", row);
    }, 300),
    filterShow() {
      if (this.eventBus) {
        bus.$emit("goOut_FilterShow", true);
      } else {
        this.$emit("open");
      }
    },
    showTab(val) {
      console.log(val);
      this.tabList = val;
    },
  },
};
</script>

<style lang="scss" scoped>
@mixin minxi-fontstyle($size, $weight, $color) {
  font-size: $size;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: $weight;
  color: $color;
}
.go-out-tabs {
  height: 44px;
  background: #ffffff;
  box-shadow: -1px 0px 1px 0px rgba(230, 230, 230, 0.31);
  display: flex;
  align-items: center;
  overflow: hidden;
  .left {
    flex: 1;
    display: flex;
    overflow-x: auto;
    .rows {
      height: 26px;
      background: #f6f7f9;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 14px 6px;
      margin: 9px 0 9px 6px;
      .img {
        margin-right: 7px;
      }
    }
    .name {
      font-size: 12px;
      @include minxi-fontstyle(12px, 500, #4a4f70);
      white-space: nowrap;
      margin-right: 7px;
      margin-left: 6px;
      font-family: PingFangSC-Medium, PingFang SC;
    }
    .name_rows {
      padding-left: 10px;
      padding-right: 10px;
    }
    .rows:last-of-type {
      margin-right: 6px;
    }
  }
  .right {
    height: 100%;
    width: 81px;
    background: #ffffff;
    box-shadow: -1px 0px 1px 0px rgba(230, 230, 230, 0.31);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    .VantButton {
      border: 0;
      border-radius: 13px;
      font-size: 12px;
      color: #1d6fe9 !important;
      font-weight: 500;
      padding: 0;
      width: 63px;
      height: 26px;
      .VanImage {
        width: 18px;
        height: 18px;
        background: #1d6fe9;
        border-radius: 50%;
        justify-content: center;
        align-items: center;
        display: flex;
        ::v-deep .van-image__img {
          width: 12px;
          height: 12px;
        }
      }
    }
  }
}
</style>
